<template>
  <Dialog :title="title" :visible="visible" :reveal="reveal" class="single-column" @close="close">
    <!-- 充值 -->
    <el-row type="flex">
      <el-col class="el-col-6-y pull-right" :span="6" style="width: 80px;">顾客：</el-col>
      <el-col :span="20" style="width: 235px;">
        <el-select
          v-model="infoData.name"
          class="el-select-y margin-y"
          filterable
          placeholder="请选择"
          style="width:100%"
          :disabled="ids===''?false:true"
          @change="handleCustomers"
        >
          <el-option
            v-for="item in option"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
    </el-row>
    <el-row type="flex">
      <el-col class="el-col-6-y pull-right" :span="6" style="width: 80px;">当前余额：</el-col>
      <el-col :span="20" style="width: 235px;">
        <span>{{ infoData.capital?infoData.capital:0 }} 元</span>
      </el-col>
    </el-row>
    <el-row type="flex" class="el-select-y">
      <el-col class="el-col-6-y pull-right" :span="6" style="width: 80px;">充值金额：</el-col>
      <el-col :span="20" style="width: 235px;">
        <el-input v-model="rechargeAmount" style="width:100%" @input="clearNoNum" />
      </el-col>
    </el-row>
    <el-row type="flex" style="padding-top: 5px;padding-left: 29px;">
      <el-col :span="7" :offset="4">
        <el-button type="primary" plain style="width: 68px;padding: 9px 0;" @click="recharge(1000)">1000</el-button>
      </el-col>
      <el-col :span="7">
        <el-button type="primary" plain style="width: 68px;padding: 9px 0;" @click="recharge(2000)">2000</el-button>
      </el-col>
      <el-col :span="7">
        <el-button type="primary" plain style="width: 68px;padding: 9px 0;" @click="recharge(3000)">3000</el-button>
      </el-col>
    </el-row>
    <el-row type="flex" style="padding-top: 5px;padding-left: 29px;">
      <el-col :span="7" :offset="4">
        <el-button type="primary" plain style="width: 68px;padding: 9px 0;" @click="recharge(5000)">5000</el-button>
      </el-col>
      <el-col :span="7">
        <el-button type="primary" plain style="width: 68px;padding: 9px 0;" @click="recharge(10000)">10000</el-button>
      </el-col>
      <el-col :span="7">
        <el-button type="primary" plain style="width: 68px;padding: 9px 0;" @click="recharge(20000)">20000</el-button>
      </el-col>
    </el-row>
    <el-row style="padding: 10px 0;text-align: right;">
      <el-col :offset="10" :span="13">合计：<span class="span">￥{{ rechargeAmount }}</span></el-col>
    </el-row>

    <el-row class="butl" style="padding: 20px 0 0 0;">
      <el-button v-loading="loading" type="primary" :disabled="infoData.name?false:true" class="submitButton" @click="submit">提交</el-button>
      <el-button class="submitButtons" @click="cancel">取消</el-button>
    </el-row>
    <div class="all-margin-bottom" />
  </Dialog>
</template>
<script>
import Dialog from '@/components/Dialog';
export default {
  components: {
    Dialog,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    ids: {
      type: [Number, String],
      default: '',
    },
  },
  data() {
    return {
      title: '充值',
      reveal: false,
      loading: false,
      infoData: {},
      option: [],
      rechargeAmount: 1000,
    };
  },
  watch: {
    ids: {
      handler(newId) {
        this.handleCustomers(newId);
      },
    },
  },
  mounted() {
    this.selectCustomers();
    this.handleCustomers(this.ids);
  },
  methods: {
    clearNoNum() {
      this.rechargeAmount = this.rechargeAmount.replace(/[^\d.]/g, ""); // 清除“数字”和“.”以外的字符
      this.rechargeAmount = this.rechargeAmount.replace(/^\./g, ""); // 验证第一个字符是数字而不是.
      this.rechargeAmount = this.rechargeAmount.replace(/\.{2,}/g, "."); // 只保留第一个. 清除多余的
      this.rechargeAmount = this.rechargeAmount.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      this.rechargeAmount = this.rechargeAmount.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');// 只能输入两个小数
    },
    recharge(money) { // 点击充值金额
      this.rechargeAmount = money;
    },
    async handleCustomers(id) { // 获取顾客信息
      // const res = await this.$api["customer/customers/details"]({ id: '1338385516768399360' });
      const res = await this.$api["customer/customers/details"]({ id });
      if (res.code !== 200) return;
      this.infoData = res.data;
    },
    async selectCustomers() { // 加载顾客下拉搜索框
      const res = await this.$api['customer/customers/list']();
      if (res.code !== 200) return this.$message.error('查询顾客失败！');
      this.option = [];
      res.data.result.forEach((item, i) => {
        this.option[i] = { value: item.id, label: item.name };
      });
    },
    async submit() { // 提交
      this.loading = true;
      const datas = {};
      datas.customerId = this.infoData.id;
      datas.customerName = this.infoData.name;
      datas.customerPhone = this.infoData.phone;
      datas.customerCode = this.infoData.code;
      datas.amount = this.rechargeAmount;
      const res = await this.$api['customer/customers/recharge'](datas);
      if (res.code !== 200) return this.$message.error('充值失败');
      this.$message.success('充值成功');
      this.$emit('cancels');
      this.loading = false;
      // console.log(this.ids, '充值');
    },
    cancel() { // 取消
      this.$emit('cancels');
    },
    close() {
      this.$emit('cancels');
      this.infoData = {};
    },
  },
};
</script>
<style lang="scss" scoped>
  .span{
    color: #ff6600;
  }
  .el-row{
    line-height: 30px;
  }
  .el-col-4{
    .el-button{
      width: 100px;
      height: 32px;
      border: 1px solid #D3DFF7;
      margin: 15px 0px 10px 0;
    }
  }
  .buttons {
    width: 100%;
    height: 40px;
    margin-top: 15px;
  }
  .el-col{
    line-height: 32px;
    margin-top: 5px;
  }

.submitButton,.submitButtons{
  width: 186px !important;
  height: 30px !important;
  background: #0278DC;
  border-radius: 4px;
  border: none;
  color:#fff;
}
.submitButton,.submitButtons{
  width: 186px !important;
  height: 30px !important;
  background: #0278DC !important;
  border-radius: 4px !important;
  color:#fff !important;
}
.submitButton:hover{
  background: #4791d1 !important;
}
.submitButtons{
  background: #EFF3FB !important;
  color: #0278DC !important;
}
.submitButtons:hover{
  background: #46a6ff !important;
  color: #fff !important;
}
.butl{
  display: flex;
  justify-content: center;
  .submitButton{
    // margin-right: 45px;
  }
  .submitButtons{
    // margin-left: 45px;
  }
}

// .margin-y /deep/.el-input__suffix{
//   margin-top: 4px;
// }
.el-col-4-y{
  text-align: right;
  padding-right: 10px;
}
/deep/.el-dialog__footer{
  margin-top: 0;
}
.pull-right{
  text-align: right;
}
</style>
